<template>
  <div>
    <div style="height: 0px">
      <strong style="display: block; margin-top: 10px; text-align: center; font-size: 40px"
        >洪涝监测</strong
      >
    </div>
    <div className="hello">
      <div className="box">
        <div className="map">
          <div id="map" ref="map"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { onMounted, onUnmounted } from "vue";
import geoJson from "@/assets/yuegangao.json";
import regionStylesData from "@/assets/regionStyles.json";
import L from "leaflet";
import floodMonitor from "@/api/local/floodMonitor";

export default {
  name: "floodMonitor",
  mounted() {
    this.$emit("changeTimeIndex", 14);
    this.$emit("changeIsSelect2", true);
    this.$emit("changeIsSelect3", false);
    this.$emit("changeIsTimeOperator", false);
  },
  setup() {
    let mymap;
    const store = useStore();
    let object = {
      user_id: store.state.userinfo.id,
      nums: 10,
    };
    const COLORS = ["blue", "yellow", "red"]; //色标颜色

    onMounted(() => {
      initMap();
      updateMap();
    });
    onUnmounted(() => {
      if (mymap) {
        mymap.remove();
        mymap = null;
      }
    });

    async function initMap() {
      const guangdongCenter = [23.125178, 113.280637];
      mymap = L.map("map", { attributionControl: false }).setView(
        guangdongCenter,
        7
      );

      // 切换底图
      //矢量地图
      const tileLayer1 = L.tileLayer(
        "http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk={accessToken}",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
        }
      );
      //影像地图
      const tileLayer2 = L.tileLayer(
        "http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk={accessToken}",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
        }
      );
      //矢量地名
      const tileLayer3 = L.tileLayer(
        "http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk={accessToken}",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
        }
      );
      //影像地名
      const tileLayer4 = L.tileLayer(
        "http://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk={accessToken}",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          accessToken: "c9b286829db376e723c3dbed98c1b25e", // 替换为自己的访问令牌
        }
      );
      const baseMaps = {
        区划图: L.layerGroup([tileLayer1, tileLayer3]),
        地形图: L.layerGroup([tileLayer2, tileLayer4]),
      };
      tileLayer1.addTo(mymap);
      tileLayer3.addTo(mymap);
      L.control.layers(baseMaps).addTo(mymap);

      // 设置地图缩放范围
      mymap.setMinZoom(4);
      mymap.setMaxZoom(15);

      // 中国边界GeoJSON图层
      L.geoJSON(geoJson, {
        style: {
          fillColor: "none",
          fillOpacity: 0,
          color: "black",
          weight: 1,
          fillOpacity: 0.1,
        },
      }).addTo(mymap);

      function highlightFeature(e) {
        const layer = e.target;
        layer.setStyle({
          weight: 3,
          color: "#767676",
          fillColor: "#767676",
          dashArray: "",
          fillOpacity: 0.7,
        });
        layer.bringToFront();
      }

      function resetHighlight(e) {
        geojson.resetStyle(e.target);
      }

      // function zoomToFeature(e) {
      // 	map.fitBounds(e.target.getBounds());
      // }

      function onEachFeature(feature, layer) {
        layer.on({
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          // click: zoomToFeature
        });
      }

      // 广东边界GeoJSON图层
      const geojson = L.geoJSON(regionStylesData, {
        style: {
          fillColor: "none",
          fillOpacity: 0,
          color: "black",
          weight: 1,
        },
        onEachFeature,
      }).addTo(mymap);

      //色标控件
      const legend = L.control({ position: "bottomright" });
      legend.onAdd = function (map) {
        const div = L.DomUtil.create("div", "legend");
        const grades = ["轻度", "中度", "重度"];
        const colors = [];
        const labels = [];
        for (let i = 0; i < grades.length; i++) {
          let from = grades[i];
          colors.push(
            `<i style="background: ${COLORS[i]};width: 12px; margin-left:19px; height: 12px; float: left; opacity: 0.76; margin-right: 19px"></i>`
          );
          labels.push(
            `<i style="width: 50px; height: 18px; text-align: center; float: left; font-style: normal;">${from}</i>`
          );
        }
        div.innerHTML = `<div style="background-color: white; width: 162px; height: 60px; padding:5px">
                   <h3 style=" text-align: center;">洪涝等级</h3>
                   ${colors.join("") + "<br>" + labels.join("")}</div>`;
        return div;
      };
      legend.addTo(mymap);

      return mymap;
    }

    async function updateMap() {
      const data1 = floodMonitor.features[0];
      const data2 = floodMonitor.features[1];
      const data3 = floodMonitor.features[2];

      console.log(data1);
      console.log(data2);
      // 数据图层;
      L.geoJSON(data1, {
        style: {
          fillColor: "blue",
          fillOpacity: 0.76,
          weight: 0.1,
        },
      }).addTo(mymap);
      L.geoJSON(data2, {
        style: {
          fillColor: "yellow",
          fillOpacity: 0.76,
          weight: 0.1,
        },
      }).addTo(mymap);
      L.geoJSON(data3, {
        style: {
          fillColor: "red",
          fillOpacity: 0.76,
          weight: 0.1,
        },
      }).addTo(mymap);
    }
  },
};
</script>

<style scoped lang="scss">
.time-picker-fixed {
  position: fixed;
  top: 90%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中偏移 */
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background-color: transparent;
}

.time-picker {
  justify-content: center;
  width: 400px;
  display: flex;
  flex-direction: row; /* 水平布局 */
  align-items: center;
  border: 3px solid #007bff;
  padding: 20px;
  border-radius: 8px;
  background-color: #f0f0f0;
}

.head-name {
  color: #b0e3ff;
  font-weight: bold;
  font-size: xx-large;
  padding: 50px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 700px) {
  .map {
    border: 3px double #c7e8ff;
    background-color: #6c8fff;
    margin: 60px;
    width: 70%;
    height: 65vh;

    #map {
      width: 100%;
      height: 65vh;
    }
  }
}

.custom-input {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px;
}

.custom-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.custom-button:hover {
  background-color: #0056b3;
}
</style>
